<template>
  <div class="page-container"
    :style="{
		background:bgStyle
	}"
  > 
    <!-- 顶部导航区域 -->
    <div class="navigation" ref="navigation"
    :style="{
			fontSize:titleSize+'px',
			color:titleColor
		}"
    >农业数据实时监控系统</div>
    <div class="changeTheme" @click="changeThem">主题切换</div>
    <!-- 底部大盒子 -->
    <div class="content">
      <!-- 左侧俩个 -->
      <div class="left-content">
        <div class="left-content-top">
          <area-plant></area-plant>
        </div>
        <div class="left-content-bottom">
          <planting-Harvest></planting-Harvest>
        </div>
      </div>
      <!-- 中间俩个 -->
      <div class="center-content">
        <div class="center-content-top">
          <crop-Areas-Proportion></crop-Areas-Proportion>
        </div>
        <div class="center-content-bottom">
          <Crop-Coverage></Crop-Coverage>
        </div>
      </div>
      <!-- 右侧俩个 -->
      <div class="right-content">
        <div class="right-content-top">
          <Crop-Growth-Trend></Crop-Growth-Trend>
        </div>
        <div class="right-content-bottom">
          <Total-Area-Crops></Total-Area-Crops>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
// 引入封装好的6个组件
import areaPlant from "./areaPlant分离.vue";
import plantingHarvest from "./plantingHarvest.vue";
import cropAreasProportion from "./cropAreasProportion.vue";
import CropCoverage from "./CropCoverage.vue";
import CropGrowthTrend from "./Trend.vue";
import TotalAreaCrops from "./TotalArea.vue";

export default {
  data() {
    return {
      //大标题字体
      titleSize: 0,
      isShow: true,
      bgStyle: "#fff",
      titleColor: "#000",
    };
  },
  computed: {
   
  },
  mounted() {
    this.screen();
    window.addEventListener("resize", this.screen);
  },
  methods: {
     //大标题字体的自适应
    screen() {
      this.titleSize = this.$refs.navigation.offsetWidth / 40;
    },
    //封装一个切换主题的事件
    changeThem() {
      //开关值 取反
      this.isShow = !this.isShow;
      if (this.isShow) {
        //打开开关
        this.bgStyle = "#fff";
        this.titleColor = "#000";
      } else {
        this.bgStyle = "#333";
        this.titleColor = "#fff";
      }
      //改变仓库中的主题状态值
      this.$store.commit("changeTheme", this.isShow);
    },
  },
  components: {
    areaPlant,
    plantingHarvest,
    cropAreasProportion,
    CropCoverage,
    CropGrowthTrend,
    TotalAreaCrops,
  },
};
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  /* background-image: url(../../public/static/img/bgc01.png) */
  /* background-color: #333333; */
}
/* 顶部导航样式 */
.navigation {
  flex: 2;
  width: 100%;
  /* background-color: orange; */
  background-image: url("../../public/img/top02.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  font-weight: 600;
  color: #fcf8e3;
  text-align: center;
  /* line-height: 3.2rem; */
}
.content {
  flex: 15;
  display: flex;
}
/* 左侧盒子 */
.content .left-content {
  flex: 1;
  /* border: 1px solid #38C5EC; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.content .left-content .left-content-top {
  width: 95%;
  height: 53%;
  border: 1px solid #38c5ec;
}
.content .left-content .left-content-bottom {
  width: 95%;
  height: 42%;
  border: 1px solid #38c5ec;
}

/* 中间盒子 */
.content .center-content {
  flex: 2;
  /* border: 1px solid #38C5EC; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.content .center-content .center-content-top {
  width: 95%;
  height: 22%;
  border: 1px solid #38c5ec;
}
.content .center-content .center-content-bottom {
  width: 95%;
  height: 75%;
  border: 1px solid #38c5ec;
}

/* 右侧盒子 */
.content .right-content {
  flex: 1;
  /* border: 1px solid #38C5EC; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.content .right-content .right-content-top {
  width: 95%;
  height: 48%;
  border: 1px solid #38c5ec;
}
.content .right-content .right-content-bottom {
  width: 95%;
  height: 48%;
  border: 1px solid #38c5ec;
}

/* 主题切换 */
.changeTheme {
  color: #4cd964;
  position: fixed;
  top: 0.625rem;
  right: 1.25rem;
}
</style>
